<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-data-table v-model="table.selected" select-all :headers="table.headers" :items="table.item" class="elevation-1" :total-items="table.totalItems" :pagination.sync="table.pagination" :rows-per-page-items="[10,20,30,40,50]" rows-per-page-text="10">
      <template v-slot:items="props">
        <td><v-checkbox v-model="props.selected" primary hide-details></v-checkbox></td>
        <td><v-icon small class="mr-2" @click="edit(props.index)">edit</v-icon></td>
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.label }}</td>
        <td>{{ props.item.actions }}</td>
        <td>{{ boolMap[props.item.level0] }}</td>
        <td>{{ boolMap[props.item.level1] }}</td>
        <td>{{ boolMap[props.item.level2] }}</td>
        <td>{{ boolMap[props.item.level3] }}</td>
        <td>{{ boolMap[props.item.level4] }}</td>
        <td>{{ boolMap[props.item.level5] }}</td>
        <td>{{ boolMap[props.item.level6] }}</td>
        <td>{{ boolMap[props.item.male] }}</td>
        <td>{{ boolMap[props.item.female] }}</td>
        <td>{{ boolMap[props.item.grade11] }}</td>
        <td>{{ boolMap[props.item.grade12] }}</td>
        <td>{{ boolMap[props.item.grade13] }}</td>
        <td>{{ boolMap[props.item.grade14] }}</td>
        <td>{{ boolMap[props.item.grade15] }}</td>
        <td>{{ boolMap[props.item.grade16] }}</td>
        <td>{{ boolMap[props.item.grade21] }}</td>
        <td>{{ boolMap[props.item.grade22] }}</td>
        <td>{{ boolMap[props.item.grade23] }}</td>
        <td>{{ boolMap[props.item.grade31] }}</td>
        <td>{{ boolMap[props.item.grade32] }}</td>
        <td>{{ boolMap[props.item.grade33] }}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { getPrescription } from '../../api/prescription'
export default {
  name: 'Table',
  props: {
    name: {},
    label: {}
  },
  data: () => ({
    boolMap: {
      true: '是',
      false: '否'
    },
    table: {
      selected: [],
      headers: [
        { text: '操作', sortable: false, value: 'action', align: 'center' },
        { text: '运动处方名称', sortable: false, value: 'name', align: 'center' },
        { text: '类型', sortable: false, value: 'label', align: 'center' },
        { text: '行动', sortable: false, value: 'actions', align: 'center' },
        { text: '缺测', sortable: false, value: 'level0', align: 'center' },
        { text: '[0,60)', sortable: false, value: 'level1', align: 'center' },
        { text: '[60,70)', sortable: false, value: 'level2', align: 'center' },
        { text: '[70,80)', sortable: false, value: 'level3', align: 'center' },
        { text: '[80,90)', sortable: false, value: 'level4', align: 'center' },
        { text: '[90,100)', sortable: false, value: 'level5', align: 'center' },
        { text: '[100)', sortable: false, value: 'level6', align: 'center' },
        { text: '男', sortable: false, value: 'male', align: 'center' },
        { text: '女', sortable: false, value: 'female', align: 'center' },
        { text: '一年级', sortable: false, value: 'grade11', align: 'center' },
        { text: '二年级', sortable: false, value: 'grade12', align: 'center' },
        { text: '三年级', sortable: false, value: 'grade13', align: 'center' },
        { text: '四年级', sortable: false, value: 'grade14', align: 'center' },
        { text: '五年级', sortable: false, value: 'grade15', align: 'center' },
        { text: '六年级', sortable: false, value: 'grade16', align: 'center' },
        { text: '初一', sortable: false, value: 'grade21', align: 'center' },
        { text: '初二', sortable: false, value: 'grade22', align: 'center' },
        { text: '初三', sortable: false, value: 'grade23', align: 'center' },
        { text: '高一', sortable: false, value: 'grade31', align: 'center' },
        { text: '高二', sortable: false, value: 'grade32', align: 'center' },
        { text: '高三', sortable: false, value: 'grade33', align: 'center' }
      ],
      totalItems: 0,
      pagination: {},
      item: []
    }
  }),
  methods: {
    update () {
      getPrescription(this.name, this.label, this.table.pagination.rowsPerPage, this.table.pagination.page).then((res) => {
        this.table.item = []
        if (res.data.data !== null) {
          this.table.item = res.data.data
        }
        this.table.totalItems = res.data.count
      })
    },
    edit (index) {
      this.$emit('edit', this.table.item[index])
    }
  },
  watch: {
    'table.pagination': {
      handler () {
        this.update()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import "../../style/table.css";
</style>
